<template>
  <div class="app-container">
    <div class="page-header">
      <el-page-header @back="goBack" content="新增收支记录" />
    </div>
    
    <el-card class="form-card">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="月份" prop="month">
              <el-date-picker 
                v-model="form.month" 
                type="date" 
                value-format="yyyy-MM-dd" 
                placeholder="请选择月份" 
                style="width: 100%" 
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="付款总计" prop="paymentTotal">
              <el-input 
                v-model.number="form.paymentTotal" 
                placeholder="请输入付款总计" 
                type="number" 
                @input="calculateBalance"
              >
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款总计" prop="receiptTotal">
              <el-input 
                v-model.number="form.receiptTotal" 
                placeholder="请输入收款总计" 
                type="number" 
                @input="calculateBalance"
              >
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="其他费用总计" prop="expenseTotal">
              <el-input 
                v-model.number="form.expenseTotal" 
                placeholder="请输入其他费用总计" 
                type="number" 
                @input="calculateBalance"
              >
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="其他收入总计" prop="incomeTotal">
              <el-input 
                v-model.number="form.incomeTotal" 
                placeholder="请输入其他收入总计" 
                type="number" 
                @input="calculateBalance"
              >
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="余额" prop="balance">
              <el-input 
                v-model.number="form.balance" 
                placeholder="自动计算" 
                readonly 
                style="background-color: #f5f7fa"
              >
                <template slot="prepend">¥</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="备注" prop="remark">
          <el-input 
            v-model="form.remark" 
            type="textarea" 
            :rows="3" 
            placeholder="请输入备注信息" 
          />
        </el-form-item>
        
        <el-form-item class="form-actions">
          <el-button type="primary" @click="submitForm" :loading="submitLoading">提交</el-button>
          <el-button @click="goBack">取消</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { addRecord } from "@/api/record/record"

export default {
  name: "RecordAdd",
  data() {
    return {
      submitLoading: false,
      form: {
        month: null,
        paymentTotal: null,
        receiptTotal: null,
        expenseTotal: null,
        incomeTotal: null,
        balance: null,
        remark: null
      },
      rules: {
        month: [
          { required: true, message: "月份不能为空", trigger: "blur" }
        ],
        paymentTotal: [
          { required: true, message: "付款总计不能为空", trigger: "blur" },
          { type: 'number', min: 0, message: "付款总计必须大于等于0", trigger: "blur" }
        ],
        receiptTotal: [
          { required: true, message: "收款总计不能为空", trigger: "blur" },
          { type: 'number', min: 0, message: "收款总计必须大于等于0", trigger: "blur" }
        ],
        expenseTotal: [
          { required: true, message: "其他费用总计不能为空", trigger: "blur" },
          { type: 'number', min: 0, message: "其他费用总计必须大于等于0", trigger: "blur" }
        ],
        incomeTotal: [
          { required: true, message: "其他收入总计不能为空", trigger: "blur" },
          { type: 'number', min: 0, message: "其他收入总计必须大于等于0", trigger: "blur" }
        ]
      }
    }
  },
  methods: {
    // 计算余额
    calculateBalance() {
      const payment = parseFloat(this.form.paymentTotal || 0)
      const receipt = parseFloat(this.form.receiptTotal || 0)
      const expense = parseFloat(this.form.expenseTotal || 0)
      const income = parseFloat(this.form.incomeTotal || 0)
      
      // 余额 = 收款总计 + 其他收入总计 - 付款总计 - 其他费用总计
      this.form.balance = receipt + income - payment - expense
    },
    
    // 提交表单
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 创建提交数据，排除自动计算的字段
          const submitData = {
            month: this.form.month,
            paymentTotal: this.form.paymentTotal,
            receiptTotal: this.form.receiptTotal,
            expenseTotal: this.form.expenseTotal,
            incomeTotal: this.form.incomeTotal,
            remark: this.form.remark
          }
          
          this.submitLoading = true
          addRecord(submitData).then(response => {
            this.$modal.msgSuccess("新增成功")
            this.submitLoading = false
            this.goBack()
          }).catch(() => {
            this.submitLoading = false
          })
        }
      })
    },
    
    // 返回上一页
    goBack() {
      this.$router.go(-1)
    },
    
    // 重置表单
    resetForm() {
      this.$refs["form"].resetFields()
      this.form = {
        month: null,
        paymentTotal: null,
        receiptTotal: null,
        expenseTotal: null,
        incomeTotal: null,
        balance: null,
        remark: null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.form-card {
  .form-actions {
    margin-top: 30px;
    text-align: center;
    border-top: 1px solid #ebeef5;
    padding-top: 20px;
    
    .el-button {
      margin: 0 10px;
      min-width: 100px;
    }
  }
}

// 输入框样式
.el-input-group__prepend {
  background: #f0f4fa;
  color: #2980b9;
  font-weight: 600;
  border-color: #dbeafe;
}

// 只读输入框样式
.el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
  color: #606266;
}
</style> 